<template>
  <div class="levelThat">
    <!--  顶部导航  -->
    <HeaderSimple
      page="userInformation"
      :title="title"
      @goBack="$router.go(-1)"
    ></HeaderSimple>

    <!--  内容  -->
    <div class="section">
      <div class="search_input">
        <van-cell-group class="search_input_container">
          <van-field
            class="search_input_item"
            v-model="searchModel"
            placeholder="输入型号搜索（支持平台所有品类）"
          />
        </van-cell-group>
        <h1 class="model">荣耀Play3e</h1>
      </div>
      <div class="level_content">
        <van-sidebar v-model="activeKey" class="select_level">
          <van-sidebar-item title="S" />
          <van-sidebar-item title="A" />
          <van-sidebar-item title="B+" />
          <van-sidebar-item title="B" />
          <van-sidebar-item title="C+" />
          <van-sidebar-item title="C" />
        </van-sidebar>
        <div class="level_content">
          <div class="level_content_item">
            <div class="level_content_item_top">
              <h1 class="title">正常开机</h1>
              <van-icon name="success" class="icon_show" />
            </div>
            <div class="level_content_item_bottom">
              <span>正常开机</span>
            </div>
          </div>
          <div class="level_content_item">
            <div class="level_content_item_top">
              <h1 class="title">正常开机</h1>
              <van-icon name="success" class="icon_show" />
            </div>
            <div class="level_content_item_bottom">
              <span>正常开机</span>
            </div>
          </div>
          <div class="level_content_item">
            <div class="level_content_item_top">
              <h1 class="title">正常开机</h1>
              <van-icon name="fail" class="icon_show" style="background-color: #FFA73F;" />
            </div>
            <div class="level_content_item_bottom">
              <span>正常开机</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Field, Sidebar, SidebarItem } from "Vant";
import HeaderSimple from "@/components/HeaderSimple";
export default {
  name: "levelThat",
  data() {
    return {
      searchModel: "", // 输入型号搜索
      activeKey: 0
    };
  },
  components: {
    HeaderSimple
  },
  created() {
    this.title = this.$route.meta.title;
  },
  methods: {}
};
</script>

<style scoped lang="less">
@deep: ~">>>";
.levelThat {
  width: 100%;
  .header {
    width: 100%;
    height: 100px;
    padding: 30px;

    @{deep} .van-nav-bar__left,
    .van-nav-bar__right {
      position: absolute;
      top: 30px;
    }

    @{deep} .van-nav-bar__title {
      font-size: 36px;
      font-family: SourceHanSansCN;
      font-weight: 600;
      color: rgba(51, 51, 51, 1);
    }

    @{deep} .van-icon {
      font-size: 38px;
      font-weight: 500;
      color: rgba(51, 51, 51, 1);
    }
  }
  .section {
    width: 100%;
    .search_input {
      width: 100%;
      height: 190px;
      .search_input_container {
        padding-top: 30px;
        background-color: #f2f2f2;
        .search_input_item {
          margin: 0 auto;
          width: 654px;
          height: 68px;
          background: rgba(255, 255, 255, 1);
          border: 1px solid rgba(193, 193, 193, 1);
          border-radius: 34px;
          @{deep} .van-field__body {
            height: 100%;
            .van-field__control {
              text-align: center;
              font-size: 14px;
              font-family: PingFang SC;
              font-weight: 500;
              color: rgba(136, 136, 136, 1);
            }
          }
        }
      }
      .model {
        margin: 30px;
        height: 35px;
        font-size: 34px;
        font-family: PingFang SC;
        font-weight: bold;
        color: rgba(51, 51, 51, 1);
      }
    }
    .level_content {
      width: 100%;
      .select_level {
        float: left;
        width: 186px;
        background-color: #f2f2f2;
        .van-sidebar-item {
          width: 186px;
          height: 64px;
          background: #f2f2f2;
        }
        .van-sidebar-item--select {
          background-color: #ffffff;
          border-color: #ff3b3e;
        }
      }
      .level_content {
        padding-left: 30px;
        float: right;
        width: 564px;
        min-height: 1044px;
        background: rgba(255, 255, 255, 1);
        .level_content_item {
          padding: 30px 0;
          height: 128px;
          width: 100%;
          border-bottom: 1px solid rgba(226, 226, 226, 1);
          .level_content_item_top {
            width: 100%;
            height: 30px;
            .title {
              float: left;
              font-size: 30px;
              font-family: PingFang SC;
              font-weight: bold;
              color: rgba(51, 51, 51, 1);
              margin-right: 11px;
            }
            .icon_show {
              float: left;
              width:30px;
              height:30px;
              text-align: center;
              line-height: 30px;
              background:rgba(66,201,104,1);
              border-radius:50%;
              color: #FFFFFF;
            }
          }
          .level_content_item_bottom {
            width: 100px;
            span {
              display: block;
              margin-top: 23px;
              font-size:24px;
              font-family:PingFang SC;
              font-weight:500;
              color:rgba(136,136,136,1);
            }
          }
        }
      }
    }
  }
}
</style>
